@import "../variable.less";
@import "../func.less";
@import "../mixin.less";
@import "./gutter.less";
@import "./offset.less";
@import "./pull.less";
@import "./push.less";

.row,
.row-reverse {
  .clearfix;

  .loop-columns(24);
}

.row {
  @class-name: ~"class*=@{columns-name}-";
  > [@{class-name}] {
    float: left;
  }
  .@{columns-name}-reverse {
    float: right;
  }
}

.row-reverse {
  @class-name: ~"class*=@{columns-name}-";
  > [@{class-name}] {
    float: right;
  }
}

.loop-columns(@n, @col-class-name: ~"", @i: 1) when (@i =< @n) {
  // 创建网格 - 固定宽度
  .col@{col-class-name}-@{i} {
    width: (floor((@i * 1000000 / @n)) / 10000) * 1%;
  }
  // 创建网格 - 宽度最大值
  .col-max@{col-class-name}-@{i} {
    max-width: (floor((@i * 1000000 / @n)) / 10000) * 1%;
  }
  // 创建网格 - 宽度最小值
  .col-min@{col-class-name}-@{i} {
    min-width: (floor((@i * 1000000 / @n)) / 10000) * 1%;
  }

  .loop-columns(@n, @col-class-name, (@i + 1));
}

@media (max-width: @xxs-screen-min) {
  .loop-columns(@columns-count, -xxs);
}
@media (min-width: @xs-screen-min) {
  .loop-columns(@columns-count, -xs);
}
@media (min-width: @sm-screen-min) {
  .loop-columns(@columns-count, -sm);
}
@media (min-width: @md-screen-min) {
  .loop-columns(@columns-count, -md);
}
@media (min-width: @lg-screen-min) {
  .loop-columns(@columns-count, -lg);
}
@media (min-width: @xl-screen-min) {
  .loop-columns(@columns-count, -xl);
}
@media (min-width: @xxl-screen-min) {
  .loop-columns(@columns-count, -xxl);
}















